<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>汽车衡称重系统</title>
	<link href="__STATIC__/css/common.css" rel="stylesheet">
	<link rel="stylesheet" href="__STATIC__/css/index.css">
	<link rel="stylesheet" type="text/css" href="__STATIC__/js/datetimepicker/jquery.datetimepicker.css" />
	<style>
		[v-cloak] {
			display: none;
		}
		.form-del{
			width: 70%;
			margin:30px auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;			
			flex-direction: column;
		}
		.form-del section{
			width: 90%;
			height:60px;
			line-height: 60px;
			font-size:24px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.form-del section span{
			width: 35%;
			height: 40px;
			line-height: 40px;
			text-align: right;
			font-size: 20px;
		}
		.form-del .input-right{
			width: 60%;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
		}
		.btn-del{
			width: 120px;
			height: 30px;
			text-align: center;
			font-size: 20px;
			line-height: 30px;
			color:#fff;
			background-color: red;
		}
		.show-msg{
			width: 80%;
			margin:30px auto;
			text-align: center;
			line-height: 50px;
			font-size:26px;
			color:red;
			border:1px solid #dedede;
			box-sizing: border-box;
			padding:20px;
		}
	</style>

</head>
<body>
	<div id="app" class="ms-controller">
		<div  v-cloak>
			<div class="header">
			</div>
			<div class="main">
				<div class="form-del">
					<section>
						<span class="input-left">请选择磅房：</span>
						<select name="" id="" class="input-right" v-model="where.houseId">
							<option value="0">空</option>
							<option v-for="(house,hid) in houses" :value="house.houseId" v-text="house.houseName"></option>
						</select>
					</section>
					<section>
						<span class="input-left">请选择物资名称</span>
						<select name="" id="" class="input-right" v-model="where.goods">
							<option value="">空</option>
							<option v-for="(wz,wid) in goods" :value="wz.goodsName" v-text="wz.goodsName"></option>
						</select>
					</section>
					<!-- <section>
						<span class="input-left">请选择开始时间：</span>
						<input type="datetime-local" class="input-right" name="" v-model="where.startTime">
					</section>
					<section>
						<span class="input-left">请选择结束时间：</span>
						<input type="datetime-local" class="input-right" name="" v-model="where.endTime">
					</section> -->
					<section>
						<span class="input-left">请输入最大皮重(Kg)：</span>
						<input type="text" class="input-right" v-model="where.fullWeigh">
					</section>
					<section>
						<button class="btn-del" @click="toDel">提交</button>
					</section>
					<div class="show-msg" v-show="info != ''" v-text="info"></div>
				</div>
			</div>
		</div>

	</div>

	<script src="__STATIC__/js/jquery.min.js"></script>
	<script src="__STATIC__/js/datetimepicker/build/jquery.datetimepicker.full.js"></script>
	<script src="__STATIC__/js/layer/layer.js"></script>
	<script src="__STATIC__/js/vue.js"></script>
	<script src="__STATIC__/js/common.js"></script>
	<script src="__STATIC__/js/jquery.cookie.min.js"></script>
	<script src="__STATIC__/js/jQuery.md5.js"></script>
	<script src="__STATIC__/js/logic.js"></script>
	<script src="__STATIC__/js/validator.js"></script>
	<script src="__STATIC__/js/axios.min.js"></script>

	<script>
		jQuery(document).ready(function () {
			const { createApp } = Vue;
			const app = createApp({
				data() {
					return {
						houses: [],
						goods: [],
						where:{
							houseId:0,
							goods:"",
							fullWeigh:0,
							emptyWeigh:0,
							startTime:"",
							endTime:"",
						},
						info:"",
						msg: {
							res: false,
							text: ""
						},
					}
				},
				methods: {
					load() {
						layer.load(0, { msg: "努力加载中，请稍后..." });
						var that = this;
						$.post(logic_urls.getBase, {},
							function (data) {
								var json = TX.toJson(data);
								console.log(json);
								if (json.status == 1) {
									layer.closeAll();
									that.houses = json.data.houses;
									that.goods = json.data.goods;
									console.log(that.houses);
									console.log(that.goods);
									
								}else{
									TX.msg('加载用户列表失败,请刷新后再试!', { time: 5000 });
								}
							}
						)
					},
					toDel(){
						var arr = {};
						this.info = "";
						if(this.where.houseId > 0){
							arr.houseId = this.where.houseId;
						}
						if(this.where.goods != ""){
							arr.goodsName = this.where.goods;
						}
						if(this.where.fullWeigh > 30000){
							arr.fullWeigh = [">",this.where.fullWeigh];
						}else{
							TX.msg("毛重不能小于30000",{time:5000});
							return;
						}
						console.log(this.where.startTime);
						if(this.where.startTime != ""){
							arr.startTime = Math.floor(new Date(this.where.startTime).getTime() / 1000);
						}
						console.log(this.where.endTime);
						if(this.where.endTime != ""){
							if(this.where.startTime == ""){
								TX.msg("请选择开始时间",{time:5000});
								return;
							}
							arr.endTime = Math.floor(new Date(this.where.endTime).getTime() / 1000);
						}
						if(Object.keys(arr).length == 0){
							TX.msg('您必须选择一个过滤条件才能删除数据', { time: 5000 });
							return;
						}
						console.log(arr);
						var that = this;
						$.post(logic_urls.adminDel, arr,
							function (data) {
								var json = TX.toJson(data);
								console.log(json);
								if (json.status == 1) {
									layer.closeAll();
									that.info = json.data;
								}else{
									TX.msg('加载用户列表失败,请刷新后再试!', { time: 5000 });
								}
							}
						)
					}
				},
				created() {
					console.log("create");
					this.load();
				},
			});
			app.mount("#app");
		});
	</script>
	<!--[if lt IE 9]>
	    <script src="__STATIC__/js/respond.js"></script>
	    <script src="__STATIC__/js/html5shiv.js"></script>
	    <script src="__STATIC__/js/placeholder-IE-fixes.js"></script>
	<![endif]-->
</body>

</html>